<script setup>
import * as IndustrialComplexService from '@/api/visual/industrialComplex'

const value = ref('用电分析')
const options = ['用电分析', '用水分析', '用气分析']
const configs = ref([])
const selected = ref({})

const loadData = async () => {
  const { data } = await IndustrialComplexService.loadIndustrialComplexEnergy1()

  for (let index = 0; index < data.length; index++) {
    const item = data[index]

    const ds = item.config2.series.data.filter(item => item.value != 0)

    item.config2.series.data = ds

    data[index].config2.series.label.formatter = params => {
      return ` ${params.name} 
    ————
     ${params.value} ${item.unitId}
    `
    }
  }

  configs.value = data
  selectOnChange(value.value)
}

const tAnimationConfig = computed(() => {
  return {
    Basis: 'x',
    Duration: 8000,
    Length: selected.value.config1 && selected.value.config1.xAxis ? selected.value.config1.xAxis.data.length : 99
  }
})

const selectOnChange = value => {
  const index = options.findIndex(item => item === value)
  // console.log(selected.value)
  selected.value = configs.value[index]
}

onMounted(loadData)
</script>

<template>
  <div class="IntelligentIntegrations">
    <div class="dom3">
      <el-segmented v-model="value" :options="options" size="large" @change="selectOnChange" />
    </div>
    <template v-if="!selected.data1">
      <div class="dom4"></div>
      <div class="dom5"></div>
      <div class="dom6"></div>
    </template>
    <div class="dom4" v-for="item in selected.data1" :key="item.text">
      <div class="dizuo">
        <span class="text">{{ item.value }}</span>
        <img src="@/assets/image/dizuo.png" alt="" srcset="" />
        <span class="desc">{{ item.text }}</span>
        <div class="btn">
          <el-icon color="#2058c7"><ArrowLeftBold /></el-icon>
          <dv-button border="Border4">
            <span class="label">同步变化率</span>
            <span class="value">{{ item.Tchange }}%</span>
          </dv-button>
        </div>
      </div>
    </div>

    <div class="dom7">
      <dv-border-box7 :color="['#4296d5', '#074498']" class="my-box7">
        <div class="dom-box">
          <div class="dom-title">企业年度{{ selected.name }}</div>
          <div class="dom-content">
            <div class="chart-content">
              <ps-chart2
                v-if="selected.config1"
                :option="selected.config1"
                tooltipAnimation
                :tAnimationConfig="tAnimationConfig"
              />
            </div>
          </div>
        </div>
      </dv-border-box7>
    </div>
    <div class="dom8">
      <dv-border-box7 :color="['#4296d5', '#074498']" class="my-box7">
        <div class="dom-box">
          <div class="dom-title">企业年度趋势</div>
          <div class="dom-content"></div>
        </div>
      </dv-border-box7>
    </div>
    <div class="dom9">
      <dv-border-box7 :color="['#4296d5', '#074498']" class="my-box7">
        <div class="dom-box">
          <div class="dom-title">季度{{ selected.name }}统计</div>
          <div class="dom-content">
            <div class="chart-content">
              <ps-chart2 v-if="selected.config2" :option="selected.config2" />
            </div>
          </div>
        </div>
      </dv-border-box7>
    </div>
    <div class="dom10">
      <dv-border-box7 :color="['#4296d5', '#074498']" class="my-box7">
        <div class="dom-box">
          <div class="dom-title">{{ selected.name }}排名</div>
          <div class="dom-content">
            <div class="title" v-if="selected.data2">
              <div class="item-header"></div>
              <div style="flex: 1; display: flex; justify-content: space-between">
                <div>时间</div>
                <div>{{ selected.unit }}</div>
              </div>
            </div>
            <div class="list" v-if="selected.data2">
              <div class="list-item" v-for="(item, index) in selected.data2">
                <div class="item-header">{{ index + 1 }}</div>
                <div class="item-content">
                  <span>{{ item.Time }}</span>

                  <span>{{ item.Value }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </dv-border-box7>
    </div>
    <div class="dom11">
      <dv-border-box7 :color="['#4296d5', '#074498']" class="my-box7">
        <div class="dom-box">
          <div class="dom-title">企业{{ selected.name }}明细</div>
          <div class="dom-content">
            <div class="chart-content">
              <div style="width: 100%; height: 100%" v-if="!selected.config3"></div>
              <dv-scroll-board :config="selected.config3" v-else />
            </div>
          </div>
        </div>
      </dv-border-box7>
    </div>
    <div class="dom12">
      <dv-border-box7 :color="['#4296d5', '#074498']" class="my-box7">
        <div class="dom-box">
          <div class="dom-title">环比趋势</div>
          <div class="dom-content"></div>
        </div>
      </dv-border-box7>
    </div>
  </div>
</template>

<style scoped lang="scss">
.IntelligentIntegrations {
  display: grid;
  width: 100%;
  grid-template-columns: 30% 40% 30%;
  grid-template-rows: 30px 20% 30% auto;
  gap: 10px;
  .dom3,
  .dom2,
  .dom1 {
    grid-column: 1 / 4;
  }

  .dom3 {
    display: flex;
    justify-content: center;
  }

  .dom4,
  .dom5,
  .dom6 {
    display: flex;

    .dizuo {
      width: 120px;
      height: 120px;
      position: relative;
      color: #fff;
      img {
        width: 120px;
        height: 120px;
      }
      .text {
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translate(-50%);
        color: #1bfdfd;
        font-size: 20px;
        font-weight: 700;
      }

      .desc {
        position: absolute;
        text-wrap: nowrap;
        bottom: -16px;
        font-size: 14px;
        left: 50%;
        transform: translate(-50%);
      }

      .btn {
        position: absolute;
        top: 50%;
        transform: translateY(50%);
        right: -160%;
        display: flex;
        align-items: center;

        .label {
          font-size: 14px;
          color: #fff;
        }

        .value {
          padding-left: 10px;
          color: #1bfdfd;
          font-size: 14px;
          font-weight: 700;
        }
      }
    }
  }

  .dom4,
  .dom5 {
    padding-left: 30%;
    // justify-content: center;
  }

  .dom7,
  .dom8,
  .dom9,
  .dom10,
  .dom11,
  .dom12 {
    overflow: hidden;
    .dom-box {
      display: flex;
      flex-direction: column;

      .dom-title {
        height: 40px;
        background-color: rgba(14, 58, 119, 0.6);
        color: #2ca7e2;
        line-height: 40px;
        padding-left: 20px;
      }
    }
  }
}

:deep(.my-box7.dv-border-box-7) {
  box-shadow: initial !important;
}

.dom-box {
  display: flex;
  flex-direction: column;
  height: 100%;

  .dom-title {
    height: 40px;
    background-color: rgba(14, 58, 119, 0.6);
    color: #2ca7e2;
    line-height: 40px;
    padding-left: 20px;
  }

  .dom-content {
    flex: 1;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .chart-content {
    flex: 1;
    overflow: hidden;

    height: calc(100% - 70px);
  }
}

.list-item {
  margin-bottom: 20px;
  width: 100%;
  display: flex;
  color: rgba($color: #fff, $alpha: 0.9);

  align-items: center;

  &:nth-child(1) {
    .item-header {
      background-color: #eca641;
    }
    .item-content {
      background: linear-gradient(90deg, #eca641 0%, rgba(0, 0, 0, 0.1) 100%);
    }
  }

  &:nth-child(2) {
    .item-header {
      background-color: #1a6a67;
    }
    .item-content {
      background: linear-gradient(90deg, #1a6a67 0%, rgba(0, 0, 0, 0.1) 100%);
    }
  }

  &:nth-child(3) {
    .item-header {
      background-color: #2e36bb;
    }
    .item-content {
      background: linear-gradient(90deg, #2e36bb 0%, rgba(0, 0, 0, 0.1) 100%);
    }
  }
}

.item-header {
  width: 40px;
  height: 20px;
  text-align: center;

  clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
.item-content {
  flex: 1;
  margin-left: 10px;
  padding: 4px;
  display: flex;
  justify-content: space-between;
}

.title {
  padding: 5px 15px;
  display: flex;
  color: rgba($color: #fff, $alpha: 0.9);
  justify-content: space-between;
  align-items: center;
}

.dom-content {
  padding: 0 15px;
}

:deep(.el-segmented__item) {
  color: #fff;
}
</style>
